<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="../include/ol.css" type="text/css">
	<script src="../include/ol.js"></script>
    
</head>
<body>
    <div id="map1"></div>
    <div id="map2"></div>

    <script>
        var gaodeMapLayer = new ol.layer.Tile({
            preload: Infinity,
            source: new ol.source.XYZ({
                url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
            })
        });

        var layero = new ol.layer.Tile({
            source: new ol.source.OSM()
        });

        var view = new ol.View({
                center: [106.51, 29.55],
                projection: 'EPSG:4326',
                zoom: 10
            });

        var map1 = new ol.Map({
            layers: [layero],
            view: view,
            target: 'map1'
        });

        var map2 = new ol.Map({
            layers: [gaodeMapLayer],
            view: view,
            target: 'map2'
        });

        
    
    </script>
</body>
</html>
